<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>任意值运动框架</title>
	<style type="text/css">
        div{
        	width:200px;height:200px;background: yellow;border:1px solid black;float:left;
        	margin:50px;
        }
	</style>

	<script type="text/javascript">
 
        window.onload = function(){
        	//变高
        	var oDiv1 = document.getElementById('div1');
        	oDiv1.onmouseover = function(){
        		startMove(this,'height',400);
        	};
        	oDiv1.onmouseout = function(){
        		startMove(this,'height',200);
        	};

        	//变宽
        	var oDiv2 = document.getElementById('div2');
        	oDiv2.onmouseover = function(){
        		startMove(this,'width',400);
        	};
        	oDiv2.onmouseout = function(){
        		startMove(this,'width',200);
        	};

        	//改变字体大小
        	var oDiv3 = document.getElementById('div3');
        	oDiv3.onmouseover = function(){
        		startMove(this,'fontSize',50);
        	};
        	oDiv3.onmouseout = function(){
        		startMove(this,'fontSize',15);
        	};

        	//改变边框大小
        	var oDiv4 = document.getElementById('div4');
        	oDiv4.onmouseover = function(){
        		startMove(this,'borderWidth',100);
        	};
        	oDiv4.onmouseout = function(){
        		startMove(this,'borderWidth',10);
        	};
        };


        //写个函数获取样式
	    function getStyle(obj,name){
            if(obj.currentStyle){
            	return obj.currentStyle[name];
            }else{
            	return getComputedStyle(obj,false)[name];
            }
	    }

        var timer = null;
        function startMove(obj,attr,iTarget){
            clearInterval(obj.timer);
            obj.timer = setInterval(function(){
            	//声明一个变量存样式
                var cur = parseInt(getStyle(obj,attr));
            	var speed = (iTarget-cur)/6;
            	speed = speed>0?Math.ceil(speed):Math.floor(speed);

            	if(cur == iTarget){
            		clearInterval(obj.timer);
            	}else{
            		obj.style[attr] = cur+speed+'px';
            	}

            }, 30);
        }

       
 
	</script>
</head>
<body>

   <div id="div1">变高</div>
   <div id="div2">变宽</div>
   <div id="div3">改变字体大小</div>
   <div id="div4">改变边框大小</div>

</body>
</html>